<template>
	<view class="userInfo-container">
		<text class="title">完善个人资料</text>
		<view class="content">
			<view class="item">
				<label>真实姓名：</label>
				<input placeholder="请输入"  />
			</view>
			<view class="item">
				<label>曾用名（选填）：</label>
				<input placeholder="请输入"  />
			</view>
			<view class="item">
				<label>身份证号：</label>
				<input placeholder="请输入"  />
			</view>
			<view class="item">
				<label>护照号：</label>
				<input placeholder="请输入"  />
			</view>
			<view class="item">
				<label>性别：</label>
				<view class="item-radio">
					<radio-group>	
					 	<label v-for="item in radioGroup" :key="item" class="it-radio">
					 		<radio :value="item" :checked="item==activeRadio" />{{item}}
					 	</label>
					</radio-group>
				</view>
			</view>
			<view class="item">
				<label>出生日期：</label>
				<picker mode="date" @change="bindDateChange">
				    <view class="picker" >
				       <input type="text" disabled="true" placeholder="请选择 >" :value="date" />
				     </view>
				 </picker>
			</view>
			<view class="item">
				<label>文化程度：</label>
				<picker title="选择您的文化程度"  @change="bindCultureChange" :range="culturedata" :value='index' >
				    <view class="picker">
				       <input type="text" disabled="true" placeholder="请选择 >"  :value="culture"/>
				     </view>
				 </picker>
			</view>
			<view class="item">
				<label>职业：</label>
				<input placeholder="请输入"  />
			</view>
			<view class="item">
				<label>民族：</label>
				<picker title="选择您的民族" :range="familydata"  :value='index'  @change="bindFamilyChange">
				    <view class="picker">
				       <input type="text" disabled="true" placeholder="请选择 >" :value="family"  />
				     </view>
				 </picker>
			</view>
			<view class="item">
				<label>国籍：</label>
				<picker :range="countrydata" title="选择您所在的国籍"  :value='index'  @change="bindCountryChange">
				    <view class="picker" >
				       <input type="text" disabled="true" placeholder="请选择 >" :value="country"  />
				     </view>
				 </picker>
			</view>
			<view class="item">
				<label>住址：</label>
				<picker mode="multiSelector" title="选择省/市/区"  :range="multiArray"  :value='index' @change="bindMultiChange">
				    <view class="picker">
				       <input type="text" disabled="true" placeholder="省/市/区（县） >"  :value="multi"/>
				     </view>
				 </picker>
			</view>
			<view class="item">
				<label>详细地址（选填）：</label>
				<input placeholder="请输入"  />
			</view>
			<view class="item">
				<label>联系手机号1：</label>
				<input placeholder="请输入"  />
			</view>
			<view class="item">
				<label>联系手机号（选填）：</label>
				<input placeholder="请输入"  />
			</view>
			<view class="item" style="margin-bottom: 40rpx;">
				<label>联系手机号3（选填）：</label>
				<input placeholder="请输入"  />
			</view>
		</view>
		<text class="title">资料上传</text>
		<view class="content">
			<view style="display: flex;flex-direction: column;">
				<view class="item2">
					<view class="item2-conten" @click="clickUpload">
						<view class="up1">
							<img src="../../static/images/ico-imgupdate.png" class="ico-img">
						</view>
						<text class="up-name">身份证（人像）</text>
					</view>
					<view class="item2-conten" @click="clickUpload">
						<view class="up1">
							<img src="../../static/images/ico-imgupdate.png" class="ico-img">
						</view>
						<text class="up-name">身份证（国徽）</text>
					</view>
				</view>
				<block class="item2">
					<view class="item2-conten" @click="clickUpload">
						<view class="up1">
							<img src="../../static/images/ico-imgupdate.png" class="ico-img">
						</view>
						<text class="up-name">人脸拍照识别</text>
					</view>
				</block>
				<block class="item2">
					<view class="item2-conten" style="width: 100%;height: 291rpx; text-align: ;" @click="clickUpload">
						<view class="up1"  style="height: 291rpx;">
							<img src="../../static/images/ico-imgupdate.png" class="ico-img">
						</view>
						<view style="width: 260rpx;text-align: center;">
							<text class="up-name">二寸免冠照片</text>
						</view>
					</view>
				</block>
			</view>
			<view class="content-text">
				<checkbox></checkbox>
				<text> 提交即视为您已同意<span style='color:#333333 ;'>《会员协议承诺书》</span></text>
			</view>
		</view>
		<button class="up-submit">提交</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index:null,
				date:'',
				culture:'',
				family:'',
				country:'',
				multi:'',
				activeRadio:'男',
				radioGroup:['男','女'],
				culturedata:['小学','初中','高中','大专','本科','博士','硕士'],
				familydata:['汉族','满族','蒙古族','回族','苗族','傣族','黎族'],
				countrydata:['中国','美国','英国','加拿大','日本','法国'],
				multiArray: [['湖南省', '测试数据', '测试数据', '测试数据', '测试数据'], ['长沙市', '测试数据', '测试数据', '测试数据', '测试数据'], ['岳麓区', '测试数据', '测试数据', '测试数据', '测试数据']],
			};
		},
		methods:{
			bindDateChange: function(e) {
				console.log(e)
				this.date = e.detail.value;
			},
			bindCultureChange: function(e) {
				console.log(e)
				this.culture = this.culturedata[e.detail.value];
			},
			bindFamilyChange: function(e) {
				console.log(e)
				this.family = this.familydata[e.detail.value];
			},
			bindCountryChange: function(e) {
				console.log(e)
				this.country = this.countrydata[e.detail.value];
			},
			bindMultiChange: function(e) {
				console.log(e)
				this.multi = this.multiArray[0][e.detail.value[0]]+ this.multiArray[1][e.detail.value[1]]+ this.multiArray[2][e.detail.value[2]];
			},
			//上传触发
			clickUpload(){
					let _self = this;
					uni.chooseImage({
						count: 1,
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album'], //从相册选择
						success: (chooseImageRes) => {
							// 成功处理
						}
					});
			},
		}
	}
</script>

<style lang="scss">
	.userInfo-container {
		line-height: 1;
		height:100%;
		width: 100%;
		position: relative;
		.title{
			display: inline-block;
			padding: 25rpx 0;
			padding-left: 22rpx;
			width: 100%;
			background: #F6F6F6;
			font-size:28rpx ;
			font-weight: 500;
		}
		.content{
			margin: 40rpx 20rpx;
			margin-bottom: 0;
			font-size: 26rpx;
			color: #333333;
			.item{
				height: 70rpx;
				line-height: 50rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				float: left;
				label,input{
					float: left;
					font-size: 26rpx;
				}
				label{
					// min-width:250rpx;
					width: inherit;
					text-align: left;
				}
				input{
					text-align:right;
					width:100%,
				}
				.item-radio{
					width: inherit;
					height: inherit;
					float: right;
					display: flex;
					align-items: center;
					flex-direction: row-reverse;
					 .it-radio{
						 margin-left: 77rpx;
					 }
					 /deep/uni-radio .uni-radio-input{
						width: 26rpx !important;
						height: 26rpx  !important;
					}
					/deep/.uni-radio-input-checked{
						background: #FFFFFF !important;
						border: 1px solid #53B3D9 !important;
					}
					/deep/uni-radio .uni-radio-input.uni-radio-input-checked:before{
						color: #53B3D9 !important;
					}
				}
			}
			.item2{
				width: 100%;
				height: 200rpx;
				margin: 28rpx 0;
				text-align: center;
			}
			.item2-conten{
				width: 260rpx;
				height: 200rpx;
				text-align: center;
				margin-right: 57rpx;
				margin-bottom: 48rpx;
				float: left;
				.up1{
					width: 260rpx;
					height: 150rpx;
					display: block;
					background: #F8F8F8;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					.ico-img{
						display: block;
						width: 53rpx;
						height: 45rpx;
					}
				}
				.up-name{
					color:#999999 ;
					font-size: 24rpx;
					padding-top: 23rpx;
					display: block;
				}
			}
		}
		.content-text{
			margin-top: 75rpx;
			margin-bottom: 175rpx;
			color:#999999 ;
			font: 20rpx;
			/deep/uni-checkbox .uni-checkbox-input{
				width: 24rpx;
				height: 24rpx;
			}
		}
		.up-submit{
			height: 88rpx;
			display: block;
			background: #53B3D9;
			line-height: 88rpx;
			margin: 0 22rpx;
			text-align: center;
			color: #FFFFFF;
			font-size:30rpx ;
			border-radius: 35px;
			margin-bottom: 40rpx;
		}
	}
</style>
